<!--
 * @Author: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @Date: 2024-03-04 14:20:59
 * @LastEditors: TANGB02 13233582+Ace-Tang@user.noreply.gitee.com
 * @LastEditTime: 2024-03-06 14:32:40
 * @FilePath: \ycq\ycq1.0\src\pages\manager\animalManager.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div>
      <div class="header">
        <a-button @click="deleteRows" class="delRows">批量删除</a-button>
        <!-- Modal -->
        <a-button type="primary" @click="showModal">添加动物</a-button>
        <a-select
          v-model:value="valueSlect"
          label-in-value
          style="width: 180px; border-radius: 1px !important; margin-left: 50%"
          :options="options"
          @change="handleChange"
        />
        <a-modal
          v-model:open="open"
          :title="animalNumber ? '修改动物信息' : '添加动物信息'"
          @ok="handleOk"
          ok-text="确定"
          cancel-text="取消"
        >
          <a-form
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            :rules="rules"
            ref="formRef"
          >
            <a-form-item label="动物年龄" name="animalAge">
              <a-input-number v-model:value="formState.animalAge" />
            </a-form-item>
            <a-form-item label="动物名称" name="animalName">
              <a-input v-model:value="formState.animalName" />
            </a-form-item>
            <a-form-item label="品种" name="breed">
              <a-input v-model:value="formState.breed" />
            </a-form-item>
            <a-form-item label="动物状态" name="animalStatus">
              <a-radio-group v-model:value="formState.animalStatus">
                <a-radio :value="0">待领养</a-radio>
                <a-radio :value="1">已领养</a-radio>
                <a-radio :value="2">救助期</a-radio>
              </a-radio-group>
            </a-form-item>
            <!-- 图片 -->
            <a-form-item label="猫猫照片" name="animalImage">
              <a-upload-dragger
                v-model:fileList="fileList"
                name="file"
                :multiple="false"
                :customRequest="customRequest"
                :maxCount="1"
              >
                <p class="ant-upload-drag-icon">
                  <inbox-outlined></inbox-outlined>
                </p>
                <p><UploadOutlined style="font-size: 40px" /></p>
                <p class="ant-upload-text">点击或拖动图片至此处</p>
                <p class="ant-upload-hint">
                  图片仅支持png/jpg格式；大小不超过2MB
                </p>
              </a-upload-dragger>
            </a-form-item>
            <a-form-item label="动物详情" name="animalDetails">
              <a-textarea v-model:value="formState.animalDetails" />
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
      <div class="userTable">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          @change="handleTableChange"
          :row-selection="rowSelection"
        >
          <template #bodyCell="obj">
            <div v-if="obj.column.dataIndex === 'animalStatus'">
              {{ getAnimalStatus(obj.record.animalStatus) }}
            </div>
            <div v-if="obj.column.dataIndex === 'todo'">
              <a-button @click="() => handleUpdata(obj.record.animalNumbers)"
                >修改</a-button
              >
              <a-button @click="() => handleDelete(obj.record.animalNumbers)"
                >删除</a-button
              >
            </div>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";
import {
  getAllAnimals,
  deleteAnimals,
  updataAnimals,
  addAnimals,
  getAnimalById,
  upload,
  download,
} from "@/service/api.js";
const pagination = ref({
  current: 1,
  total: 0,
  pageSize: 10,
  showTotal: (total) => `共 ${total} 条数据`,
  showQuickJumper: true,
});
const dataSource = ref([]);
const open = ref(false);
const formState = ref({
  animalName: "",
  animalAge: null,
  breed: "",
  animalDetails: "",
  animalStatus: null,
});
const animalNumber = ref(null);
const valueSlect = ref({
  value: "",
  label: "全部状态",
});
const columns = ref([
  {
    title: "动物编号",
    dataIndex: "animalNumbers",
    align: "center",
  },
  {
    title: "动物名称",
    dataIndex: "animalName",
    align: "center",
  },

  {
    title: "动物年龄",
    dataIndex: "animalAge",
    align: "center",
  },
  {
    title: "品种",
    dataIndex: "breed",
    align: "center",
  },
  {
    title: "动物详情",
    dataIndex: "animalDetails",
    align: "center",
  },
  {
    title: "动物状态",
    dataIndex: "animalStatus",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "todo",
    align: "center",
  },
]);
const options = ref([
  {
    value: "",
    label: "全部状态",
  },
  {
    value: 0,
    label: "待领养",
  },
  {
    value: 1,
    label: "已领养",
  },
  {
    value: 2,
    label: "救助期",
  },
]);
const fileList = ref([]);
const fileName = ref("");
const getAllAnimal = async () => {
  const res = await getAllAnimals({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
  });
  if (res.code === 1) {
    dataSource.value = res.data.records;
    pagination.value.total = res.data.total;
  }
};
getAllAnimal();

const getAnimalStatus = (animalStatus) => {
  switch (animalStatus) {
    case 0:
      return "待领养";
    case 1:
      return "已领养";
    case 2:
      return "救助期";
  }
};
//添加
const showModal = () => {
  open.value = true;
};

//修改
const handleUpdata = async (animalNum) => {
  open.value = true;
  animalNumber.value = animalNum;
  //回显
  const res = await getAnimalById({
    animalNumber: animalNum,
  });
  console.log(res);
};
//删除
const handleDelete = async (animalNumbers) => {
  console.log(animalNumbers);
  const res = await deleteAnimals({ animalNumbers });
  console.log(res);
  if (res.code === 1) {
    message.success("删除成功");
    getAllAnimal();
  } else message.error("删除失败");
};
//根据状态查询
const handleChange = async (selectObj) => {
  const res = await getAllAnimals({
    pageNumber: pagination.value.current,
    pageSize: pagination.value.pageSize,
    animalStatus: selectObj.value,
  });
  console.log(res);
  if (res.code === 1) {
    dataSource.value = res.data.records;
    pagination.value.total = res.data.total;
  }
};
//添加/修改
const handleOk = async (e) => {
  console.log(e);
  if (animalNumber.value) {
    // 修改
    const res = await updataAnimals({
      ...formState.value,
      animalNumbers: animalNumber.value,
      animalImage: fileName.value,

    });
    console.log(res);
    // 修改成功
    animalNumber.value = null;
    formState.value = {};
    open.value = false;
    getAllAnimal();
  } else {
    //添加
    const add = await addAnimals({
      ...formState.value,
      animalImage: fileName.value,
    });
    console.log(add);
    if (add.code === 1) {
      message.success(add.data);
      pagination.value.current = 1;
      getAllAnimal();
      formState.value = {};
      open.value = false;
    } else message.error("新增失败");
  }
};
// 获取可用的url
const load = async (name) => {
  const res = await download({ name });
};
// 头像
const customRequest = async (file) => {
  // file 是上传的文件 其内容会在放在下面截图中
  // 后端需要接受的参数是 formData数据，
  const form = new FormData();
  console.log(file);

  form.append("file", file.file);

  const res = await upload(form);
  console.log(res);
  if (res.code === 1) {
    // 调用组件内方法, 设置为成功状态
    file.onSuccess(res, "上传成功");
    file.status = "done";

    console.log(res);
    fileName.value = res.data;

    //  load(fileName.value);
  } else {
    file.onError();
    file.status = "error";
  }
};
const handleTableChange = (pageObj) => {
  console.log(pageObj);
  pagination.value = pageObj;
  getAllAnimal();
};
</script>
<style scoped>
.header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
  padding: 12px;
  .search-input {
    padding-left: 8px;
    border: none;
    background-color: #dddddd;
    border-radius: 25px;
    float: right;
    width: 200px;
  }
  .search {
    position: relative;
    height: 30px;
    right: 30px;
    top: 8px;
  }
  .delRows {
    margin-right: 20px;
  }
}
</style>
